<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.indexedlist.css" />
		<link rel="stylesheet" type="text/css" href="css/all_app.css" />
		<link rel="stylesheet" type="text/css" href="css/phone_list.css" />
		<title>选择联系人</title>
		<style>
			.mui-bar-nav {
				box-shadow: none;
				background: #FF7234;
				text-align: center;
			}
			
			.mui-title {
				color: #fff;
			}
			
			.mui-action-back {
				color: #fff;
			}
			
			.mui-bar .mui-btn-link {
				color: #fff;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style=" ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择联系人</h1>
			<!--<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">确定</a>-->
		</header>
		<div class="mui-content">

			<div class="mui-indexed-list-inner">
				<ul class="mui-table-view" id="listArea">
					<li class="mui-table-view-cell" id="mode">

					</li>
					<!--<li class="mui-table-view-cell">
						<img src="../images/txl-head.png" class="mui-media-object mui-pull-left" />
						<div class="mui-media-body mui-pull-left">
							<p><span class="name">艾格新</span><span class="department">【人力资源】</span></p>
							<p>人力资源</p>
						</div>
						<p class="mui-pull-right col">
							<img src="../images/txl-phone.png" class="phone" /><img src="../images/txl-IM.png" class="message" />
						</p>
					</li>
					<li class="mui-table-view-cell"><img src="../images/txl-head.png" class="mui-media-object mui-pull-left" />
						<div class="mui-media-body mui-pull-left">
							<p><span class="name">艾格新</span><span class="department">【人力资源】</span></p>
							<p>人力资源</p>
						</div>
						<p class="mui-pull-right col">
							<img src="../images/txl-phone.png" class="phone" /><img src="../images/txl-IM.png" class="message" />
						</p>
					</li>
					<li class="mui-table-view-cell"><img src="../images/txl-head.png" class="mui-media-object mui-pull-left" />
						<div class="mui-media-body mui-pull-left">
							<p class="mui-ellipsis"><span class="name">艾格新</span><span class="department">【人力资源】</span></p>
							<p>人力资源</p>
						</div>
						<p class="mui-pull-right col">
							<img src="../images/txl-phone.png" class="phone" /><img src="../images/txl-IM.png" class="message" />
						</p>
					</li>-->
				</ul>
			</div>
		</div>
	</body>
	<script src="../lib/mui.min.js"></script>
	<!--<script src="../lib/mui.indexedlist.js" type="text/javascript"></script>-->
	<script type="text/javascript" src="../lib/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="../lib/service.js"></script>
	<script type="text/javascript">
		mui.init({
			//			statusBarBackground: '#2D83EA'
		});
		if(window.plus) {
			plusReady();
		} else {
			document.addEventListener("plusready", plusReady, false);
		}

		function plusReady() {
			//提交数据
			var phoneList = [];
			//			var header = document.querySelector('header.mui-bar');
			//			var list = document.getElementById('list');
			//			list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
			//			window.indexedList = new mui.IndexedList(list);

			/*个人资料*/
			mui(".mui-table-view").on('tap', 'li', function() {
				console.log($(this).find('.left_content').attr('name'))
				console.log($(this).find('.left_content').attr('phone'))
				var data = {
					name: $(this).find('.left_content').attr('name'),
					phone: $(this).find('.left_content').attr('phone'),
					pos: JSON.parse(plus.webview.currentWebview().parms).pos
				}
				//				console.log(plus.webview.getWebviewById('../auth/emergencyContact.html'))
				plus.webview.getWebviewById('../auth/emergencyContact.html').evalJS("setData('" + JSON.stringify(data) + "')")
				plus.webview.currentWebview().close()
			});

			// 扩展API加载完毕，现在可以正常调用扩展API
			plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
				addressbook.find(["displayName", "phoneNumbers"],
					function(contacts) {
						var area = document.getElementById("listArea")
						for(var i = 0, len = contacts.length; i < len; i++) {
							var li = document.getElementById("mode").cloneNode(true);
							var str = '<div class="left_content" name="' + contacts[i].displayName + '" phone="' + (contacts[i].phoneNumbers.length == 0 ? "" : contacts[i].phoneNumbers[0].value) + '">'
							str += '<img src="../images/txl-head.png" class="mui-media-object mui-pull-left" />'
							str += '<div class="mui-media-body mui-pull-left">'
							str += '<p><span class="name">' + contacts[i].displayName + '</span><span class="department"></span></p>'
							str += '<p>' + (contacts[i].phoneNumbers.length == 0 ? "" : contacts[i].phoneNumbers[0].value) + '</p>'
							str += '</div></div>'
							str += '<p class="mui-pull-right col">'
							str += '<!--<img src="../images/txl-phone.png" class="phone" /><img src="../images/txl-IM.png" class="message" />--></p>'
							//
							li.innerHTML = str
							//														li.innerHTML = contacts[i].displayName + "<br/>手机：" 
							//                          dataArea.append(li);
							area.appendChild(li);
							var temp = {
								name: contacts[i].displayName,
								phoneNumber: (contacts[i].phoneNumbers.length == 0 ? "" : contacts[i].phoneNumbers[0].value)
							}
							phoneList.push(temp)

						}
						//						提交所有的数据到服务器╮(╯▽╰)╭
						//加一个判断咯，╮(╯▽╰)╭
//						if(localStorage.getItem("getcontact") != "ok") {
//							localStorage.setItem('getcontact', 'ok');
//							post('app/member/postAddressBook', JSON.stringify(phoneList), function(res) {
//								console.log(JSON.stringify(res))
//								//							mui.toast(res.message)
//							});
//						}

					},
					function() {
						mui.toast("获取电话簿失败 ");
					}, {
						multiple: true
					});
			}, function(e) {
				mui.toast("获取电话簿失败，请开启通讯录权限 ");
				$('#mode').html('请前往手机设置打开通讯录权限')
				plus.webview.getWebviewById('../real-name/real-name.html').close();
				plus.webview.getWebviewById('../auth/emergencyContact.html').close()
				plus.webview.currentWebview().close()
			});
			console.log(phoneList)
			if(plus.tools.platform == plus.tools.ANDROID) {
				setTimeout(function() {
					if(phoneList.length == 0) {
						mui.toast("获取电话簿失败，请开启通讯录权限 ");
						$('#mode').html('请前往手机设置打开通讯录权限')
					}
				},200)

			}
		};

		function post(route, datas, successfn, errorfn) {
			console.log("请求地址" + serverUrl + route + "和参数" + JSON.stringify(datas));
			$.ajax(serverUrl + route, {
				data: datas,
				crossDomain: true,
				dataType: 'json', //服务器返回json格式数据
				type: 'POST', //HTTP请求类型
				timeout: 1000000, //超时时间设置为10秒；
				headers: {
					'Content-type': 'application/json',
					jsonType: 'jsonType',
					token: localStorage.getItem('token'),
					smstoken: localStorage.getItem('smstoken')
				},
				success: function(data, status, request) {
					console.log("请求成功地址" + serverUrl + route + "和参数" + JSON.stringify(data));
					if(data.success) {
						successfn(data);
					} else if(!data.success && data.data.code == "1039") {
						//token过期
						localStorage.removeItem('token')
						openurl('../landing/login.html')
					} else if(data.data.code == '2000') {
						errorfn(data);
					} else {
						errorfn(data);
					}
					if(request.getResponseHeader("token") != null) {
						localStorage.setItem('token', request.getResponseHeader("token"));
						localStorage.setItem('lastTime', Date.parse(new Date()));
					}
					if(request.getResponseHeader("smstoken") != null) {
						localStorage.setItem('smstoken', request.getResponseHeader("smstoken"))
					}

				},
				error: function(xhr, type, errorThrown) {
					console.log("请求失败地址" + serverUrl + route + "和参数" + JSON.stringify(datas));
					console.log(xhr.status + "   " + errorThrown)
					mui.toast('请求失败!' + type);
				}
			});
		}
	</script>

</html>